<%@ page contentType="text/html;charset=UTF-8" language="java" deferredSyntaxAllowedAsLiteral="true"%>
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游戏开发</title>
    <script type="text/javascript" src="scripts/prototype.js"></script>
</head>
<body>
    <div id="bg_div" style="position: absolute;top: 0px;left: 0px;width: 1280px;height: 720px;">
        <!-- 背景图片 -->
        <img id="bg_img" src="images/beijing.png" width="100%" height="100%">
    </div>
    <div id="divDd1" class="dd" style="POSITION: absolute; TOP:415px; LEFT:398px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd1"  src="images/nor.png" />
    </div>
    <div id="divDd2" class="dd1" style="POSITION: absolute; TOP:415px; LEFT:583px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd2"  src="images/nor.png" />
    </div>

    <div id="divDd3" class="dd" style="POSITION: absolute; TOP:415px; LEFT:757px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd3"  src="images/nor.png" />
    </div>

    <div id="divDd4" class="dd" style="POSITION: absolute; TOP:542px; LEFT:219px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd4"  src="images/nor.png" />
    </div>

    <div id="divDd5" class="dd" style="POSITION: absolute; TOP:542px; LEFT:401px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd5"  src="images/nor.png" />
    </div>

    <div id="divDd6" class="dd" style="POSITION: absolute; TOP:542px; LEFT:583px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd6"  src="images/nor.png" />
    </div>

    <div id="divDd7" class="dd" style="POSITION: absolute; TOP:542px; LEFT:764px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd7"  src="images/nor.png" />
    </div>

    <div id="divDd8" class="dd" style="POSITION: absolute; TOP:542px; LEFT:945px; width:123px; height:100px;z-index: 10">
        <img id="img_Dd8"  src="images/nor.png" />
    </div>

    <div id="layer" style="position:fixed;top:10px;left:50px;width: 100px;height: 80px;background: azure;display: none">
        <button id="answer1">是</button>
        <button id="answer2">否</button>
    </div>

    <div id="timer" style="POSITION: absolute; TOP:80px; LEFT:1163px; width:80px; height:44px;line-height:44px;font-size: 30px; color:red;z-index: 99">90
    </div>

<script type="text/javascript">
    var LoadInit = Class.create({
        initialize: function(focusParam, focusParam2){
            this.styleTemplate = new Template('position: absolute; top: #{top}px; left: #{left}px; height: #{height}px; width: #{width}px;'); //syle 样式模板
            this.focusParam = focusParam; 	//第一个页面焦点移动配置信息
            this.focusParam2 = focusParam2; //第二个页面焦点移动配置信息
            this.buttons = {}; 				//元素按钮配置
            this.time = 90; 				//默认定时时间
            this.speed = 800;

            this.isSucc = false;
            this.isOnkeyDown = false;
            this.lkWeizhi = 1;
            this.chuiWeizhi = 1;
            this.weizhis = [1,2,3,4,5,6,7,8];
            this.score = 0;
            this.inter1;

            this.initMove();
        },

        initMove: function(){
            if(this.focusParam && this.focusParam != ''){
                var kyeEles = this.focusParam.split(':');
                for ( var i = 0; i < kyeEles.length; i++) {
                    var temp = kyeEles[i].split('=');
                    var temp_ = temp[1].split(',');
                    this.buttons['a_' + temp[0] ] = this.KeyMove('a_' + temp[0], '', 'a_' + temp_[0], 'a_' + temp_[1], 'a_' + temp_[2], 'a_' + temp_[3], '');
                }
            }

            if(this.focusParam2 && this.focusParam2 != ''){
                var kyeEles = this.focusParam2.split(':');
                for ( var i = 0; i < kyeEles.length; i++) {
                    var temp = kyeEles[i].split('=');
                    var temp_ = temp[1].split(',');
                    this.buttons['b_' + temp[0] ] = this.KeyMove('b_' + temp[0], '', 'b_' + temp_[0], 'b_' + temp_[1], 'b_' + temp_[2], 'b_' + temp_[3], '');
                }
            }
        },

        KeyMove: function (id, action, up, down, left, right, focusImage){ 	//焦点对象
            var info = {};
            info.id =  id;
            info.action =  action;
            info.up =  up;
            info.down =  down;
            info.left =  left;
            info.right =  right;
            info.focusImage =  focusImage;
            return info;
        },

        changeActive: function(key, type){	//改变 焦点对象
            console.info(this.buttons[key]);
            if(type == 1){ //上
                currActive = this.buttons[key].up;
            }else if (type == 2){ //下
                currActive = this.buttons[key].down;
            }else if(type == 3){ //左
                currActive = this.buttons[key].left;
            }else if(type == 4){ //右
                currActive = this.buttons[key].right;
            }else{
                currActive = key;
            }
            if(currActive == 'a_0' || currActive == 'b_0'){
                currActive = key;
                return;
            }

            var temps =  currActive.split('_');
            if(temps[0] == 'a'){
                $('divDd'+this.chuiWeizhi).setStyle({border: '0px'});
                $('divDd'+temps[1]).setStyle({border: '5px solid red'});
                this.chuiWeizhi = temps[1];
            } else if(temps[0] == 'b'){
                $('answer1').setStyle({border: '0px'});
                $('answer2').setStyle({border: '0px'});
                $('answer'+temps[1]).setStyle({border: '5px solid yellow'});
            }
        },

        openLayer: function(){ //打开弹出层
            $('layer').setStyle({'display': 'block'});
            $('answer1').setStyle({border: '0px'});
            $('answer2').setStyle({border: '0px'});
            this.changeActive('b_1');
        },

        enterKey: function() {
            console.info("enter currActive:"+currActive);
            if(currActive.indexOf('a') == 0){
                this.openLayer();

            }else if(currActive.indexOf('b') == 0) {
                $('layer').setStyle({'display': 'none'});
                currActive='a_'+this.chuiWeizhi;
            }
        },

        MyKeyEvent: function(keyEvent){ //监听键值
            if(this.isOnkeyDown) return ;
            keyEvent = keyEvent ? keyEvent : window.event;
            keyEvent.which = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
            console.info("按键编号:"+keyEvent.which)
            switch(keyEvent.which ){
                case 37://'left';
                    this.changeActive(currActive, 3);
                    break;
                case 38://'up';
                    this.changeActive(currActive, 1);
                    break;
                case 39://'right';
                    this.changeActive(currActive, 4);
                    break;
                case 40://'down';
                    this.changeActive(currActive, 2);
                    break;
                case 13://'enter'
                    this.enterKey();
                    break;
                default:
                    break;
            }
        }
    });

    var myPage;  //全局对象
    var currActive; 				//当前元素
    var defaultActive = 'a_1'; 		//默认焦点
    var focusParam = '1=0,5,0,2:2=0,6,1,3:3=0,7,2,0:4=1,0,0,5:5=1,0,4,6:6=2,0,5,7:7=3,0,6,8:8=3,0,7,0';
    var focusParam2 = '1=0,0,0,2:2=0,0,1,0';

    Event.observe(window, 'load', function() {  //绑定页面加载

        myPage = new LoadInit(focusParam,focusParam2);//初始化页面s
        window.document.onkeydown = myPage.MyKeyEvent.bind(myPage);	 //绑定按键
        myPage.changeActive(defaultActive);

        var timerInterval = setInterval(function () {
            if ($('timer')) {
                var t = parseInt(document.getElementById('timer').innerHTML);
                if (t == 0) {
                    clearInterval(timerInterval);

                } else {
                    document.getElementById('timer').innerHTML = (--t);
                }
            }
        }, 1000);
    });
</script>
</body>
</html>
